<template>
  <div class="class-detail">
    <!-- 头部 -->
    <BaseHeader :navs="navs" :activeNav="activeNav" @nav-change="activeNav = $event" />

    <div class="container">
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <span>首页</span>
        <span class="separator">></span>
        <span>无人机课程</span>
        <span class="separator">></span>
        <span>CAAC</span>
        <span class="separator">></span>
        <span class="current">初级课程</span>
      </div>

      <!-- 课程信息卡片 -->
      <div class="course-info-card">
        <div class="course-img">
          <!-- 占位图片 -->
	        <img src="@/assets/other/tupian.png"/>
        </div>
        <div class="course-info-main">
          <div class="course-title">初级课程（CAAC）</div>
          <div class="course-price">价格：<span class="price">¥998</span></div>
          <div class="course-meta">
            <div>主讲老师：张三</div>
            <div>课程有效期：购买后365天有效</div>
          </div>
          <div class="course-actions">
            <el-button class="btn-consult" @click="handleConsult">咨询客服</el-button>
            <el-button type="primary" class="btn-buy">立即购买</el-button>
          </div>
        </div>
      </div>

      <!-- tab切换 -->
      <div class="course-tabs">
        <div :class="['tab-item', {active: activeTab === 'intro'}]" @click="activeTab = 'intro'">课程简介</div>
        <div :class="['tab-item', {active: activeTab === 'catalog'}]" @click="activeTab = 'catalog'">课程目录</div>
      </div>

      <div class="tab-content">
        <div v-if="activeTab === 'intro'" class="intro-content">
          <div class="intro-section">
            <h3>课程介绍</h3>
            <p>本课程是CAAC（中国民用航空局）认证的无人机驾驶初级课程，适合零基础学员。通过本课程的学习，您将：</p>
            <ul>
              <li>掌握无人机飞行的基本原理和操作技能</li>
              <li>了解民用无人机相关法规和安全规范</li>
              <li>获得CAAC认证的无人机驾驶员执照</li>
              <li>具备独立操作小型无人机的能力</li>
            </ul>
          </div>
          <div class="intro-section">
            <h3>适合人群</h3>
            <ul>
              <li>零基础想学习无人机驾驶的学员</li>
              <li>需要考取CAAC无人机驾驶证的从业者</li>
              <li>对无人机技术感兴趣的爱好者</li>
              <li>想要从事无人机相关工作的求职者</li>
            </ul>
          </div>
          <div class="intro-section">
            <h3>课程特色</h3>
            <ul>
              <li>专业讲师一对一指导</li>
              <li>理论与实践相结合的教学方式</li>
              <li>提供完整的考证辅导</li>
              <li>灵活的学习时间安排</li>
              <li>终身制的技术支持服务</li>
            </ul>
          </div>
        </div>
        <div v-if="activeTab === 'catalog'" class="catalog-content">
          <div v-for="(chapter, cIdx) in chapters" :key="cIdx" class="catalog-chapter">
            <div class="chapter-header" @click="toggleChapter(cIdx)">
              <span class="chapter-title">{{ chapter.title }}</span>
              <span class="chapter-arrow" :class="{expanded: chapter.expanded}">
                <i class="el-icon-arrow-down"></i>
              </span>
            </div>
            <div v-show="chapter.expanded" class="chapter-lessons">
              <div v-for="(lesson, lIdx) in chapter.lessons" :key="lIdx" class="lesson-row">
                <div class="flex flex-start">
                    <span class="lesson-title">{{ lesson.title }}</span>
                    <span class="lesson-tag" v-if="lesson.tag">{{ lesson.tag }}</span>
                </div>
                <el-button size="mini" class="lesson-btn">购买课程</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <BaseFooter />
    <!-- 右侧悬浮 -->
    <RightContact ref="rightContact" />
  </div>
</template>

<script>
import BaseHeader from '@/components/baseHeader.vue';
import BaseFooter from '@/components/baseFooter.vue';
import RightContact from '@/components/rightContact.vue';

export default {
  name: 'ClassDetail',
  components: { BaseHeader, BaseFooter, RightContact },
  data() {
    return {
      navs: ['首页', '新闻', '题库', '资料', '产教课程'],
      activeNav: '',
      activeTab: 'catalog',
      chapters: [
        {
          title: '1. 认识AI和AI产品经理',
          expanded: true,
          lessons: [
            { title: '1. 什么是人工智能', tag: '可试看' },
            { title: '1. 什么是人工智能', tag: '可试看' },
            { title: '1. 什么是人工智能', tag: '可试看' },
            { title: '1. 什么是人工智能', tag: '可试看' }
          ]
        },
        {
          title: '1. 认识AI和AI产品经理',
          expanded: false,
          lessons: [
            { title: '1. 什么是人工智能', tag: '可试看' }
          ]
        },
        {
          title: '1. 认识AI和AI产品经理',
          expanded: false,
          lessons: [
            { title: '1. 什么是人工智能', tag: '可试看' }
          ]
        },
        {
          title: '1. 认识AI和AI产品经理',
          expanded: false,
          lessons: [
            { title: '1. 什么是人工智能', tag: '可试看' }
          ]
        }
      ]
    }
  },
  methods: {
    toggleChapter(idx) {
      this.chapters.forEach((c, i) => {
        if (i === idx) {
          this.$set(c, 'expanded', !c.expanded)
        } else {
          this.$set(c, 'expanded', false)
        }
      })
    },
    handleConsult() {
      this.$refs.rightContact.showConsult = true;
    }
  }
}
</script>

<style scoped lang="scss">
.class-detail {
  background: #f8faff;
  min-height: 100vh;
}
.container {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 40px;
}
.breadcrumb {
  margin: 24px 0 16px 0;
  font-size: 14px;
  color: #666;
  display:flex;
 justify-content: flex-start;
	align-items: center;
  span {
    color: #909399;
    &.separator {
      margin: 0 8px;
      color: #909399;
    }
    &.current {
      color: #1664FF;
    }
  }
}
.course-info-card {
  display: flex;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 #e1e3eb;
  padding: 32px 24px;
  margin-bottom: 32px;
  .course-img {
	  width: 280px;
    background: #eaeaea;
    border-radius: 8px;
    margin-right: 32px;
	  img{
		  width: 100%;
		  height: 100%;
	  }
  }
  .course-info-main {
    text-align:left;
    flex: 1;
    .course-title {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 12px;
    }
    .course-price {
      font-size: 18px;
      margin-bottom: 8px;
      .price {
        color: #ff4d4f;
        font-weight: bold;
        font-size: 20px;
      }
    }
    .course-meta {
      font-size: 14px;
      color: #888;
      margin-bottom: 18px;
      div {
        margin-bottom: 4px;
      }
    }
    .course-actions {
      display: flex;
      gap: 16px;
      .btn-consult {
        background: #fff;
        color: #1664ff;
        border: 1px solid #1664ff;
      }
      .btn-buy {
        background: #1664ff;
        color: #fff;
        border: none;
      }
    }
  }
}
.course-tabs {
  display: flex;
  background: #fff;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 0;
  .tab-item {
    padding: 18px 32px;
    font-size: 16px;
    color: #909399;
    cursor: pointer;
    &.active {
      color: #333;
      font-weight: bold;
    }
  }
}
.tab-content {
  background: #fff;
  border-radius: 0 0 8px 8px;
  padding: 32px 24px;
  min-height: 320px;
}
.intro-section {
  margin-bottom: 32px;
  h3 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 12px;
    position: relative;
    padding-left: 10px;
    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 4px;
      bottom: 4px;
      width: 4px;
      background: #409eff;
      border-radius: 2px;
    }
  }
  p, ul {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 8px;
    text-align:left;
  }
  ul {
    padding-left: 20px;
    li {
      margin-bottom: 8px;
      list-style: disc;
      text-align:left;
    }
  }
}
.catalog-content {
  .catalog-chapter {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px 0 #f0f1f5;
    .chapter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 20px;
      font-size: 16px;
      font-weight: 500;
      color: #222;
      cursor: pointer;
      .chapter-arrow {
        transition: transform 0.3s;
        &.expanded {
          transform: rotate(180deg);
        }
      }
    }
    .chapter-lessons {
      padding: 0 20px 16px 20px;
      .lesson-row {
        display: flex;
        align-items: center;
        padding: 20px 20px;
	      background: #f7f8fa;
	      border-radius: 10px;
        //border-bottom: 1px solid #ececec;
	      margin-bottom: 15px;
        justify-content: space-between;
        &:last-child {
          border-bottom: none;
        }
        .lesson-title {
          flex: 1;
          color: #333;
          display: inline-block;
          margin-right: 10px;
        }
        .lesson-tag {
          background: #1664ff;
          color: #fff;
          border-radius: 8px;
          font-size: 12px;
          padding: 2px 8px;
          margin-right: 12px;
          display:flex;
          justify-content:center;
          align-items: center;
        }
        .lesson-btn {
          background: #1664ff;
          color: #fff;
          border: none;
        }
      }
    }
  }
}
.flex{
    display:flex;
}
.flex-start{
   justify-content: flex-start;
}
.flex-col-start{

}
</style>
